<template>
  <div>
    <div class="flex jc-sb" id="vditor" @change="onchange">
      <van-field
        v-model="store.currArticle.title"
        rows="3"
        autosize
        type="textarea"
        placeholder="请输入标题"
      />
    </div>
    <van-button
      id="save"
      plain
      icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"
      type="primary"
    ></van-button>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import "vditor/dist/index.css";
import Vditor from "vditor";
import { toolbars } from "../config/config";
import { useStore } from "../pinia";

const store = useStore();

let message = ref("");

const vditorRef = ref(null);
const saveContent = () => {
  if (vditorRef.value) {
    const content = vditorRef.value.getValue();
    localStorage.setItem("vditorContent", content);
    console.log("内容已保存到 localStorage");
  }
};

onMounted(() => {
  vditorRef.value = new Vditor("vditor", {
    height: 500,
    mode: "wysiwyg",
    toolbar: toolbars,
    value: "",
    after() {
      // 尝试从 localStorage 中恢复内容
      // const savedContent = localStorage.getItem("vditorContent");
      // if (savedContent) {
      vditorRef.value.setValue(store.currArticle.content);
      // }
    },
  });
});
</script>

<style scoped>
.vditor {
  height: calc(100vh - 50px) !important;
  overflow: auto;
  /* padding-bottom: 80px; */
  background-color: #fff;
}
#save {
  position: fixed;
  top: 20px; 
  right: 0;
}
</style>
